<template>
  <div class="q-collapse-box">
    <a-collapse defaultActiveKey="1">
      <a-collapse-panel key="1" header="告警人员信息">
        <div class="infoBox">
          <img v-if="infoData.head == null" class="tImg" src="@/assets/ico/head.png" alt="" />
          <img v-else class="tImg" :src="infoData.head" alt="" />
          <!-- <img v-else class="tImg" :src="'data:image/png;base64,' + infoData.head" alt="" /> -->
          <div style="float: left;width: 200px;">
            <div class="s s1">
              <span>{{ infoData.name }}</span>
              <a-tag style="margin-left:10px;" color="red">{{ infoData.alarmType }}</a-tag>
            </div>
            <div class="s s3">
              <span>告警时间：{{ infoData.alarmTime }}</span>
              <span>危险性评估：{{ typeOfHazardAssessment }}</span>
            </div>
          </div>
          <a-button
            class="handleBtn"
            :disabled="ynDisposal == '1'"
            @click="handleDispose"
            type="primary"
          >处置</a-button
          >
        </div>

        <h3>告警信息</h3>
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="pageData"
          :showSelection="false"
          :showPagination="true"
          :customRow="clickCustomRow"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="longitude" slot-scope="text, record">
            <span>{{ text }},{{ record.latitude }}</span>
          </template>
        </CustomTable>
      </a-collapse-panel>
    </a-collapse>
    <!--弹窗区域 -->
    <DisposeModal :id="id" ref="disposeModalRef" />
  </div>
</template>

<script>
import * as api from '@/api/xlgc/alarmCenter.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import DisposeModal from './disposeModal'
export default {
  components: {
    CustomTable,
    DisposeModal
  },
  data() {
    return {
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '到达时间',
          dataIndex: 'arrivalTime',
          // width: 110,
          align: 'center',
          scopedSlots: { customRender: 'arrivalTime' }
        },
        {
          title: '经纬度',
          dataIndex: 'longitude',
          // width: 90,
          align: 'center',
          scopedSlots: { customRender: 'longitude' }
        },
        {
          title: '位置信息',
          dataIndex: 'positionInfo',
          // width: 190,
          align: 'center',
          scopedSlots: { customRender: 'positionInfo' }
        }
      ],
      loading: false,
      typeOfHazardAssessment: '',
      infoData: {},
      id: JSON.parse(this.$route.query.info).id,
      ynDisposal: JSON.parse(this.$route.query.info).ynDisposal
    }
  },
  mounted() {
    this.getInfo()
    this.refreshTable()
  },
  methods: {
    handleDispose() {
      this.$refs.disposeModalRef.show()
    },
    onSearch(obj) {
      this.pageFilter.alarmInfoId = this.id
      this.pageFilter.startTime = obj.startTime
      this.pageFilter.endTime = obj.endTime
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    getInfo() {
      api
        .queryTrackInfo(this.id)
        .then(res => {
          if (res.success) {
            this.infoData = res.result
            if (this.infoData.typeOfHazardAssessment == '01') {
              this.typeOfHazardAssessment = '重点帮教人员'
            }
            if (this.infoData.typeOfHazardAssessment == '02') {
              this.typeOfHazardAssessment = '一般帮教人员'
            }
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    refreshTable() {
      this.loading = true
      api
        .queryTrack(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            if (this.pageData.records.length > 0) {
              let pArr = []
              this.pageData.records.forEach((item, index) => {
                pArr.push({
                  key: index,
                  address: item.positionInfo,
                  longitude: item.longitude,
                  latitude: item.latitude
                })
              })
              this.$emit('searchMap', [pArr])
            }
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    rangePickerChange(date) {
      this.$set(this.pageFilter, 'beginDate', date[0])
      this.$set(this.pageFilter, 'endDate', date[1])
    },
    clickCustomRow(record, index) {
      // var _this = this
      // return {
      //   on: {
      //     // 事件
      //     click: () => {
      //       this.$emit('clickRow', record)
      //     }
      //   }
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.q-collapse-box {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 600px;
  height: 100%;
  // height: 800px;
  .infoBox {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    .tImg {
      width: 60px;
      height: 70px;
      border-radius: 5px;
      float: left;
    }
    .s {
      padding-bottom: 5px;
    }
    .s1 {
      margin-left: 20px;
      font-size: 14px;
      font-weight: bold;
    }
    .s2 {
      margin-left: 20px;
      font-size: 16px;
      // font-weight: bold;
    }
    .s3 {
      margin-left: 20px;
      font-size: 12px;
      // font-weight: bold;
      span {
        margin-right: 30px;
        width: 300px;
        display: inline-block;
        margin-bottom: 5px;
      }
    }
    .handleBtn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
  h3 {
    border-top: 1px solid #ccc;
    padding-top: 15px;
  }
}

/deep/.ant-table-row {
  // cursor: pointer;
}
</style>
